import React, { Component, Fragment } from 'react';
import Header_container from '../../../../containers/home_container/Header_container'
import { BackTop } from 'antd';
import HeaderMobile from '../../mobile/Header'
import '../componentStyle/home/App'
import FirstContent from '../components/homeSeconds/FirstContent';
import SecondContent from '../components/homeSeconds/SecondContent';
import ThreeContent from '../components/homeSeconds/ThreeContent';
import Star from '../components/common/Star'
import FourContent from '../components/homeSeconds/FourContent';
import FiveContent from '../components/homeSeconds/FiveContent';
import Footer from '../components/homeSeconds/Footer';

import store from '../../../../redux/store'
import { Provider } from 'react-redux'

// 星星位置
const pos = [
    {
        top: 20,
        left: 20,
        scale: 0.5,
        duration: '2s'
    },
    {
        top: 370,
        left: 1200,
        scale: 0.3,
        duration: '2.7s'
    },
    {
        top: 200,
        left: 400,
        scale: 0.4,
        duration: '3s'
    },
    {
        top: 80,
        left: 1500,
        scale: 0.6,
        duration: '2.3s'
    },
    {
        top: 70,
        left: 300,
        scale: 0.3,
        duration: '4s'
    },
]

class HomePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            screenWidth: window.innerWidth,
            screenHeight: window.innerHeight,
            done: false,
            isFixed: false,
            scrollIndex: 0
        }
    }

    // 事件监听，如果屏幕大小改变，立即改变screenWidth，并且触发媒体查询
    componentWillMount() {
        window.addEventListener('resize', function (e) {
            const screenWidth = e.target.innerWidth;
            const screenHeight = e.target.innerHeight;
            this.setState({
                screenWidth: screenWidth,
                screenHeight: screenHeight
            })
        }.bind(this));


        window.addEventListener('scroll', function (e) {
            const scrollTop = document.documentElement.scrollTop;
            if (scrollTop > 60) {
                switch (this.state.scrollIndex) {
                    case 0:
                        if (scrollTop > 900) {
                            this.setState({
                                scrollIndex: 1
                            });
                        }
                        break;
                    case 1:
                        if (scrollTop > 1800) {
                            this.setState({
                                scrollIndex: 2
                            });
                        } else if (scrollTop < 900) {
                            this.setState({
                                scrollIndex: 0
                            });
                        }
                        break;
                    case 2:
                        if (scrollTop > 2700) {
                            this.setState({
                                scrollIndex: 3
                            });
                        } else if (scrollTop < 1800) {
                            this.setState({
                                scrollIndex: 1
                            });
                        }
                        break;
                    case 3:
                        if (scrollTop > 3000) {
                            this.setState({
                                scrollIndex: 4
                            });
                        } else if (scrollTop < 2700) {
                            this.setState({
                                scrollIndex: 2
                            });
                        }
                        break;
                    case 4:
                        if (scrollTop < 3000) {
                            this.setState({
                                scrollIndex: 3
                            });
                        }
                        break;
                    default:

                }

                if (!this.state.isFixed) {
                    this.setState({
                        isFixed: true
                    });
                }
            } else {
                if (this.state.isFixed) {
                    this.setState({
                        isFixed: false
                    });
                }
            }
        }.bind(this));
    }

    handleHeaderArchor = (index) => {
        this.setState({
            scrollIndex: index
        });
    }

    render() {
        if (this.state.screenWidth > 500) {
            return (
                <Fragment>
                    <BackTop visibilityHeight={900} />
                    <Provider store={store}>
                        <Header_container
                            isFixed={this.state.isFixed}
                            scrollIndex={this.state.scrollIndex}
                            handleHeaderArchor={this.handleHeaderArchor}
                        />
                    </Provider>
                    <div
                        className='first'
                        id='first'
                    >
                        <FirstContent />
                        {
                            // 遍历生成星星
                            pos.map((item, index) => {
                                return <Star item={item} key={index} screenWidth={this.state.screenWidth} />
                            })
                        }
                    </div>
                    <div style={{
                        height: 900,
                        width: '100%',
                        paddingTop: 50,
                        paddingBottom: 50,
                        backgroundColor: '#2a4190'
                    }} id='second'>
                        <SecondContent scrollIndex={this.state.scrollIndex} />
                    </div>
                    <div style={{
                        height: 900
                    }} id='three'>
                        <ThreeContent />
                    </div>
                    <div style={{
                        height: 900,
                        backgroundColor: '#eee'
                    }} id='four'>
                        <FourContent />
                    </div>
                    <div style={{
                        height: 600,
                        backgroundColor: '#f0f2f4'
                    }} id='five'>
                        <FiveContent />
                    </div>
                    <div style={{
                        height: 150,
                        backgroundColor: '#000'
                    }}>
                        <Footer />
                    </div>
                </Fragment>
            )
        } else {
            return (
                <HeaderMobile />
            )
        }
    }
}

export default HomePage;